<template>
	<view class="content">
		<view class="top">
			<view class="title">
				<text class="title_text flex">外卖</text>
				<view class="position flex">
					<u-icon name="map-fill" color="#FE393F" size="28"></u-icon>
					<text style="font-size: 30rpx; margin-left: 13rpx;">北京万达</text>
				</view>
				
				<!-- <view class="flex"></view> -->
			</view>
		
			<view class="search_box">
				<view class="input">
					
					<view class="icon"></view>
					
					<view class="right">
						<input
						class="search-input"
						    placeholder="请输入你要搜索的餐厅名"
							fontSize="26rpx"
							border="none"
						    v-model="searchValue"
						></input>
						<view class="search_btn">
							<text>搜索</text>
						</view>
						
					</view>
					
				</view>
			</view>
			
			<view class="select_tab">
				<view class="tab_item" v-for="item in selectTabList">
					<text style="margin-right: 14rpx;">{{ item.title }}</text>
					<u-icon name="arrow-down-fill" color="#A9A9A9" size="13rpx"></u-icon>
				</view>
			</view>
			
			<view class="tab">
				<text class="tab_item" v-for="item in tabList">{{ item.title }}</text>
			</view>
			
		</view>
	
		<view class="valueList">
			<view class="item_box" v-for="item in 6" @click="goShop">
				<view class="item_img">
					<image src="http://www.jiubakeji.cn/images/meishi.jpeg" style="width: 100%; height: 100%;"></image>
				</view>
				
				<view class="item_info">
					<view class="title">
						<text>外婆家(万达店)</text>
						<text class="range">320m</text>
					</view>
				
					<view class="score">
						<u-rate :count="scoreVlaue.count" v-model="scoreVlaue.value" size="26rpx" ></u-rate>
						<text style="font-size: 26rpx; line-height: 26rpx; margin-left: 20rpx;">5.</text><text style="font-size: 18rpx; line-height: 18rpx;">0</text>
					</view>
				
					<text style="font-size: 24rpx; font-weight: 500; color: #7B7B7B;">江浙菜丨￥80/人</text>
					
					<view class="status">
						<text class="tip">排队</text>
						<text>餐厅当前未联网，暂停取号</text>
					</view>
				
				</view>
				
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				selectTabList: [
					{
						title: "附近"
					},
					{
						title: "全部菜系"
					},
					{
						title: "智能排序"
					},
					{
						title: "筛选"
					}
				],
				tabList: [
					{
						title: "有包房"
					},
					{
						title: "优惠餐厅"
					},
					{
						title: "距离最近"
					},
					{
						title: "人气最高"
					}
				],
				scoreVlaue: {
					count: 5,
					value: 5
				}
			}
		},
		methods: {
			goShop() {
				uni.navigateTo({
					url: "/pages/takeaway/shop_info"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.top {
			padding: 0rpx 0 20rpx;
			background-color: #fff;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				padding: 0 36rpx;
				color: #000000;
				
				.position {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
				.title_text {
					display: flex;
					justify-content: flex-start;
					font-size: 40rpx;
					font-weight: 600;
				}
				.flex {
					flex: 1;
				}
				
			}
		
			.search_box {
				margin-top: 35rpx;
				padding: 0 26rpx;
				
				.input {
					display: flex;
					align-items: center;
					height: 75rpx;
					padding: 0 11rpx 0 26rpx;
					background: #FFFFFF;
					border: 3rpx solid #30AEFD;
					border-radius: 38rpx;
					
					.icon {
						width: 36rpx;
						height: 36rpx;
						background: url(@/static/img/search.png) no-repeat;
						background-size: 36rpx;
					}
					.right {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 1;
						margin-left: 34rpx;
						.search-input {
							width: calc(100% - 125rpx);
							height: 53rpx;
						}
						.search_btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 123rpx;
							height: 53rpx;
							font-size: 26rpx;
							color: #FFFFFF;
							background: linear-gradient(90deg, #0156F6, #3AC0FF);
							border-radius: 27rpx;
						}
					}
				}
			}
			
			
			.select_tab {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				padding: 0 40rpx;
				
				.tab_item {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
				}
				
			}
			
			.tab {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 35rpx;
				padding: 0 37rpx;
				.tab_item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 62rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #7C7C7C;
					background-color: #f7f7f7;
				}
			}
			
			
		}
	
		.valueList {
			padding: 26rpx;
			
			.item_box {
				display: flex;
				padding: 25rpx 20rpx;
				margin-bottom: 26rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				
				.item_img {
					width: 165rpx;
					height: 165rpx;
					border-radius: 20rpx;
					background-color: yellow;
				}
				
				.item_info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					height: 165rpx;
					margin-left: 35rpx;
					padding-top: 3rpx;
					box-sizing: border-box;
					.title {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
						.range {
							margin: 4rpx 18rpx 0 0; 
							font-size: 20rpx;
							font-weight: 500;
							color: #B4B4B4;
						}
					}
					
					.score {
						display: flex;
						align-items: flex-end;
						font-weight: 500;
						color: #FE4755;
					}
					
					.status {
						font-size: 20rpx;
						font-weight: 500;
						color: #B4B4B4;
						
						.tip {
							margin-right: 12rpx;
							padding: 4rpx 6rpx;
							font-size: 18rpx;
							font-weight: 500;
							color: #FFFFFF;
							background-color: #FE4755;
							border-radius: 6rpx;
						}
						
					}
					
				}
				
			}
			
			
			
		}
	
	}
</style>
